<template>
  <!-- 群助手 -->
  <div class="keyword-container">
    <div class="backbar">
      <div class="back" v-hammer:tap="(ev) => $router.go(-1)">
        <i class="fa fa-angle-left fa-lgl"></i>
        <span>返回</span>
      </div>
    </div>
    <div class="search-wrapper" v-if="!currentHelper.robotName">
      <!-- 搜索框 -->
      <div class="search-box flexbox justify-between align-center">
        <div class="icon">
          <img src="@/assets/icons/search.svg" alt class="svg-icon" />
        </div>
        <div class="input-wrapper">
          <input type="text" v-model="searchText" @keyup.enter="onSearchEnter" />
        </div>
        <div class="action">
          <span v-if="robotList.length === 0" class="cancel-text" @click="onSearchEnter">搜索</span>
          <span v-else class="cancel-text" @click="robotList = []">取消</span>
        </div>
      </div>

      <div class="no-helper" v-if="robotList.length === 0">还没有群助手</div>
      <!-- 搜索结果列表 -->
      <div class="search-result" v-if="robotList.length > 0">
        <ul class="result-list">
          <li class="list-item flexbox" v-for="(item, i) of robotList" :key="i">
            <div class="icon">
              <img :src="item.robotHead" alt srcset />
            </div>
            <div class="info">
              <div class="title">{{ item.robotName }}</div>
              <div class="content">{{ item.robotIntro }}</div>
            </div>
            <div class="action">
              <cube-button @click="onAddHelper(item)" primary>
                <span>添加</span>
              </cube-button>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 已有的助手 -->
    <div class="current-helper" v-if="currentHelper.robotName && robotList.length === 0">
      <div class="helper-wrapper">
        <div class="title-wrapper">
          <div class="icon">
            <img :src="currentHelper.robotHead" alt />
          </div>
          <div class="info">{{ currentHelper.robotName }}</div>
          <div class="action">
            <div @click="onDeleteHelper" class="button">
              <span>删除</span>
            </div>
            <div @click="onChangeHelper" class="button">
              <span>更换</span>
            </div>
          </div>
        </div>

        <div class="info-wrapper">
          <div class="create-time">更新时间: {{ getTime(currentHelper.createTime) }}</div>
          <div class="intro">{{ currentHelper.robotIntro }}</div>
        </div>
      </div>

      <!-- 分隔栏 -->
      <div class="gap">已添加的关键词</div>
      <!-- 添加关键词面板 显示已添加及添加操作 -->
      <div class="added-keyword flex-center">
        <!-- 已有的关键字 -->
        <div v-if="keywordList.length" class="current-keyword">
          <div class="config-title">关键词配置</div>
          <div class="config-wrapper">
            <ul class="config-list">
              <li class="list-item" v-for="(item, i) of keywordList" :key="i">
                <div class="info">
                  <div>{{ item.keywordName }}</div>
                </div>
                <div class="action">
                  <cube-button @click="onAddKeywordConfig(item)">
                    <span>添加</span>
                  </cube-button>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 添加关键字 -->
        <div v-else class="add-keyword flex-center column">
          <img src="@/assets/icons/keyword.svg" alt class="keyword-icon" />
          <span>还没有关键字哦~</span>
          <div class="add-wrapper">
            <cube-button @click="onAddKeyword" primary>
              <span>去添加</span>
            </cube-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Mutation, Getter, namespace } from "vuex-class";
import { Webim } from "@/utils/types";
import { Response } from "@/api/bean";
import { MsgTypeKV } from "@/api/socket/imClient";
import MessageMixin from "@/mixins";
import { getTime, formPost } from "@/utils/common";
declare const $Vue: Vue;
declare const webim: Webim;
const chatModule = namespace("chatModule");
const userModule = namespace("userModule");

/**
 * 添加关键字流程
 * 1. 无关键字 搜索助手
 * 2. 添加关键字
 * 3.
 */

@Component<GroupHelper>({
  mixins: [MessageMixin]
})
export default class GroupHelper extends Vue {
  // 表示映射chat模块下的mutation方法
  // @chatModule.Mutation('s') $isEmpty: any;

  // 已有的配置关键词列表
  private configList: Array<any> = [];

  // 搜索的关键词列表
  private robotList: Array<any> = [];

  private keywordList: Array<any> = [];

  private currentHelper: any = {};
  // 搜索文本
  private searchText: string = "";

  /**
   * 顯示控制
   */
  private showSearch: boolean = true;
  // 是否顯示已添加的關鍵字 與未添加狀態互斥
  private showCurrentKeyword: boolean = false;

  private getTime(time) {
    return getTime(time);
  }

  private eventList: Array<string> = [
    "$getGroupHelper",
    "$searchGroupHelper",
    "$addGroupHelper",
    "$addKeyword",
    "$selectKeyword",
    "$deleteHelper"
  ];

  protected mounted() {
    this.initEvents(this.eventList);
    // 获取群助手
    this.sendMessage(MsgTypeKV.getGroupHelper);
  }

  /**
   * 确认搜索
   */
  private onSearchEnter() {
    if (this.searchText === "") {
      return this.$createToast({
        txt: "请输入群助手名称",
        type: "warn",
        time: 3000
      }).show();
    }
    this.sendMessage(MsgTypeKV.searchGroupHelper, {
      robotName: this.searchText
    });
  }

  /**
   * 添加群助手
   */
  private onAddHelper(item: any) {
    this.sendMessage(MsgTypeKV.addGroupHelper, {
      robotId: item.robotId
    });
  }

  /**
   * 去添加关键词
   */
  private onAddKeyword() {
    this.sendMessage(MsgTypeKV.addKeyword);
  }

  /**
   * 添加关键词配置
   */
  private onAddKeywordConfig(item: any) {
    this.sendMessage(MsgTypeKV.addKeyword, {});
  }

  /**
   * 删除群助手
   */
  private onDeleteHelper(item: any) {
    this.sendMessage(MsgTypeKV.deleteHelper);
  }
  /**
   * 更换群助手
   */
  private onChangeHelper(item: any) {}

  private onGroupClicked(ev: any, item: any) {
    this.$router.push({
      name: "ChatPanel"
    });
    sessionStorage.setItem("ChatPanel", JSON.stringify(item));
  }

  /**
   * 获取已有的群助手
   */
  private $getGroupHelper(data: any) {
    if (data.result === 11) {
      // 显示“还没有关键字”
      this.currentHelper = data.robot;
    } else if (data.result === 10) {
      // 显示“还没有群助手”
    } else if (data.result === 0) {
      // 有助手也有关键字列表
      this.currentHelper = data.robot;
      this.keywordList = data.keywordList;
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  /**
   * 搜索群助手
   */
  private $searchGroupHelper(data: any) {
    if (data.result === 0) {
      let robotList = data.robotList;
      if (robotList.length === 0) {
        this.$createToast({
          txt: "无搜索结果",
          type: "warn",
          time: 5000
        }).show();
      } else {
        this.robotList = robotList;
      }
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  /**
   * 添加群助手
   */
  private $addGroupHelper(data: any) {
    if (data.result === 0) {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
      this.robotList = [];
      this.sendMessage(MsgTypeKV.getGroupHelper);
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  /**
   * 去添加关键字
   */
  private $addKeyword(data: any) {
    if (data.result === 0) {
      let pageVo = data.pageVo;
      formPost(pageVo.keywordUrl, pageVo.param);
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  /**
   * 点击关键字
   */
  private $selectKeyword(data: any) {
    if (data.result === 0) {
      let robotList = data.robotList;
      if (robotList.length === 0) {
        this.$createToast({
          txt: "无搜索结果",
          type: "warn",
          time: 5000
        }).show();
      }
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }

  /**
   * 删除助手
   */
  private $deleteHelper(data: any) {
    if (data.result === 0) {
      this.$createToast({
        txt: data.message,
        type: "correct",
        time: 3000
      }).show();
      this.$router.go(-1);
    } else {
      this.$createToast({
        txt: data.message,
        type: "warn",
        time: 3000
      }).show();
    }
  }
}
</script>

<style lang="stylus" scoped>
.list-item
  width 100%
  height 56px
  display flex
  justify-content space-between
  border-bottom 1px solid #dfdfdf
  padding 2px 12px
  box-sizing border-box
  .icon
    flex-basis 12%
    img 
      width 90% 
      height 90%
  .info
    flex-basis 70%
    display flex
    justify-content space-around
    align-items center
    flex-wrap wrap
    font-size 15px
    flex-direction column
  .action
    flex-basis 18%
    display flex
    justify-content space-between
    align-items center
    font-size 14px
  .cube-btn
    padding 2px 4px


.keyword-container
  width 100%
  height 100%
  overflow-x hidden
  overflow-y auto
  .search-wrapper
    width 100%
    .search-box 
      background #989898
      width 100% 
      height 36px
      .icon
        flex-basis 10% 
      .input-wrapper 
        flex-basis 74% 
        input 
          width 100% 
          height 24px
          border-radius 2px
          padding 2px 4px
      .action 
        flex-basis 16%
        color #8dc9f0 
    .search-result 
      width 100% 
      ul.result-list
        width 100%
        height 100%
  .current-helper 
    width 100%
    .helper-wrapper 
      width 100%
      display flex
      flex-wrap wrap
      .title-wrapper 
        width 100%
        height 56px
        display flex
        justify-content space-between
        align-items center
        border-bottom 1px solid #d9d9d9
        .icon
          flex-basis 10% 
          width 10% 
        .info
          flex-basis 60% 
          width 60% 
        .action 
          flex-basis 30% 
          width 30% 
          display flex
          .button 
            width 40px
            height 24px
            border 1px solid #a9a9a9
            border-radius 2px
            font-size 14px
            line-height 24px
            margin 4px
      .info-wrapper
        display flex 
        flex-direction column
        width 100% 
        .create-time
          height 24px
          line-height 24px
          padding 8px
          text-align left
          font-size 14px
        .intro 
          height 80px
          padding 8px
          text-align left
      .config-list
        width 100%
    .gap
      width 100%
      height 18px
      line-height 18px
      font-size 14px
      background #ededed
      padding 4px 0
    .added-keyword
      width 100%
      .current-keyword
        width 100%
        .config-title
          font-size 24px 
          font-weight bolder
           
  .add-keyword
    width 180px

.cancel-text
  font-size 13px

.keyword-icon
  width 120px
  height 120px

.add-wrapper
  width 80px
  height 24px
  padding 10px 

.no-helper
  height 80px
  line-height 80px
  font-size 20px
  color #909090

.config-title
  padding 16px 0
</style>

